<!-- 修改密码 -->
<template>
  <div>
    <div>
      <van-cell-group>
        <van-field label="手机号" type="number" required ref="mobile" v-model="changePwd.mobile" clearable placeholder="请输入手机号" />
      </van-cell-group>
      <van-cell-group>
        <van-field ref="code" required type="number" v-model="changePwd.code" maxlength="6" center clearable label="短信验证码" placeholder="请输入短信验证码">
          <van-button slot="button" size="small" type="info" @click="sendSms" :disabled="showbtn">{{codePhone}}</van-button>
        </van-field>
      </van-cell-group>
      <van-cell-group>
        <van-field v-model="changePwd.password" required ref="password" label="新密码" type="password" placeholder="请输入新密码" />
      </van-cell-group>
      <van-cell-group>
        <van-field v-model="confirmPsw" required ref="confirmPsw" label="确认密码" type="password" placeholder="请确认密码" />
      </van-cell-group>
      <van-button :loading="loading" type="info" class="confirm" @click="changeConfirm" loading-text="加载中...">确定</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      changePwd: {
        code: '',
        password: '',
        mobile: '',
      },
      loading: false,
      codePhone: '发送验证码',
      showbtn: false,
      confirmPsw: '',//确认密码
    }
  },
  methods: {
    //发送验证码
    async sendSms () {
      if (this.changePwd.mobile == '') {
        this.$notify({ type: 'warning', message: '手机号不能为空' });
        this.$refs.mobile.focus();
        return;
      }
      if (!this.regular.checkPhone().test(this.changePwd.mobile)) {
        this.$notify({ type: 'warning', message: '手机号格式错误' });
        this.$refs.mobile.focus();
        return;
      }
      let codeNum = 60
      let timer = setInterval(() => {
        codeNum--
        this.codePhone = `${codeNum}s后重试`
        this.showbtn = true
        if (codeNum == 0) {
          this.codePhone = '重新发送'
          this.showbtn = false
          clearInterval(timer)
        }
      }, 1000)
      const url = `/auth/sendSms/${this.changePwd.mobile}`
      let result = await this.request.httpRequest('GET', url, {})
      if (result.code == 200) {
        this.$notify({ type: 'success', message: result.msg });
      } else {
        this.$notify({ type: 'warning', message: result.msg });
        clearInterval(timer)
      }
    },
    //忘记密码
    async changeConfirm () {
      if (this.changePwd.mobile == '') {
        this.$notify({ type: 'warning', message: '手机号不能为空' });
        this.$refs.mobile.focus();
        return;
      }
      if (!this.regular.checkPhone().test(this.changePwd.mobile)) {
        this.$notify({ type: 'warning', message: '手机号格式错误' });
        this.$refs.mobile.focus();
        return;
      }
      if (this.code == '') {
        this.$notify({ type: 'warning', message: '验证码不能为空' });
        this.$refs.code.focus();
        return;
      }
      if (!this.changePwd.password) {
        this.$notify({ type: 'warning', message: '新密码不能为空' });
        this.$refs.password.focus();
        return;
      }
      let regu = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
      let re = new RegExp(regu)
      if (!re.test(this.changePwd.password)) {
        this.$notify({ type: 'warning', message: '新密码必须由6-16位数字和字母组成' });
        this.$refs.password.focus();
        return;
      }
      if (this.confirmPsw == '') {
        this.$notify({ type: 'warning', message: '确认密码不能为空' });
        this.$refs.confirmPsw.focus();
        return;
      }
      if (this.changePwd.password != this.confirmPsw) {
        this.$notify({ type: 'warning', message: '两次密码不一致' });
        return;
      }
      this.loading = true
      const url = '/auth/forgetPwd'
      let result = await this.request.mobileRequest('PUT', url, this.changePwd)
      if (result.code == 200) {
        this.$notify({ type: 'success', message: result.msg });
        this.$router.push('/')
        this.loading = false
      } else {
        this.loading = false
        this.$notify({ type: 'warning', message: result.msg });
      }
    }
  }
}
</script>

<style scoped>
.confirm {
  margin-top: 0.5rem;
  width: 90%;
  margin-left: 5%;
  background-color: #ff5252;
  border: none;
}
.van-cell {
  margin-bottom: 0.25rem !important;
}
</style>
